import React, { Component } from 'react';
import { Form, Input, Button, Toast } from 'antd-mobile'
import '../../styles/Code.scss'
import service from '../../api'
class code extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tel: '',
            telcode: ''
        }
    }
    // 监听属性，获取value赋值给自定义值
    onChange = (e) => {
        this.setState({
            [e.target.name]: e.target.type == 'checkbox' ? e.target.checked : e.target.value
        })
    }
    back() {
        this.props.history.go(-1)
    }
    // 获取验证码
    async captcha() {
        var res = await service.user.user_dosendmsgcode({ tel: this.props.location.state.tel })
        this.setState({ telcode: res.data.data })
    }
    async topass() {
        var res1 = await service.user.user_docheckcode({ tel: this.props.location.state.tel, telcode: this.state.telcode })
        if (res1.data.code == 200) {
            this.props.history.push({ pathname: '/register/pass', state: { tel: this.props.location.state.tel } })
        } else if (res1.data.code == 10007) {
            Toast.show(res1.data.message)
        }
    }
    render() {
        return (
            <div className='code'>
                <div className="tu">
                    <div className='iconfont icon-tupianjiazaishibai03'></div>
                    <div>我们将以短信形式将验证码发送给您</div>
                </div>
                <div className='yanzhen'>
                    <div className="inp">
                        <input type="text" name='telcode' value={this.state.telcode} onChange={(e) => { this.onChange(e) }} />
                    </div>
                    <div className="yan" onClick={() => { this.captcha() }} >发送验证码</div>
                </div>
                <div className="btn" >
                    <button onClick={() => { this.topass() }}>下一步</button>
                </div>
            </div>
        );
    }
}

export default code;